<template>
  <view>
    <view class="page-index">
      <!-- 首页展示 -->
      <view class="page_content">
        <view class="swiper">
          <swiper
            indicator-dots="true"
            :autoplay="true"
            :circular="circular"
            :interval="interval"
            :duration="duration"
            indicator-color="rgba(255,255,255,0.6)"
            indicator-active-color="#fff"
          >
            <block v-for="(item, index) in imgUrls" :key="index">
              <swiper-item>
                <image
                  :src="HTTP_IMG_STATIC + '/' + item.image"
                  class="slide-image"
                  lazy-load
                ></image>
              </swiper-item>
            </block>
          </swiper>
        </view>
        <!-- menu -->
        <view class="nav acea-row">
          <block v-for="(item, index) in menus" :key="index">
            <view
              v-if="item.type == userInfo.thirdId"
              @click="urlOpen(item)"
              class="item"
              hover-class="none"
            >
              <view class="pictrue">
                <image :src="item.pic"></image>
              </view>
              <view class="menu-txt">{{ item.name }}</view>
            </view>
          </block>
        </view>
      </view>
    </view>
    <tip_realname />
  </view>
</template>

<script>
import { getIndexData } from "@/api/api.js";
import { mapGetters } from "vuex";
import { HTTP_IMG_STATIC } from "@/config/app.js";
import tip_realname from "@/components/tip_realname.vue";
import { getWxConfig } from "@/utils/wxJS.js";
export default {
  computed: mapGetters(["isLogin", "uid", "userInfo"]),
  components: {
    tip_realname,
  },
  data() {
    return {
      HTTP_IMG_STATIC,
      imgUrls: [],
      menus: [
        {
          pic: "/static/images/tjk.png",
          url: "/pages/tjCard_record/tjCard_record",
          name: "体检卡",
          type: 1,
        },
        {
          pic: "/static/images/tjyy.png",
          url: "/pages/hospital/hospital",
          name: "体检医院",
          type: 1,
        },
        {
          pic: "/static/images/tjjl.png",
          url: "/pages/tjRecord/tjRecord",
          name: "体检记录",
          type: 1,
        },
        {
          pic: "/static/images/smrz.png",
          url: "/pages/realNameAuth/realNameAuth",
          name: "实名认证",
          type: 1,
        },
        {
          pic: "/static/images/zjhx.png",
          name: "体检核销",
          click: true,
		   type: 0,
        },
        {
          pic: "/static/images/hxjl.png",
          url: "/pages/writeOff_record/writeOff_record",
          name: "核销记录",
		   type: 0,
        },
      ],
      circular: true,
      autoplay: true,
      interval: 3000,
      duration: 500,
      settingObj: {},
    };
  },

  onLoad() {
    this.getIndexConfig();
  },
  methods: {
    urlOpen(item) {
      if (item.url) {
        uni.navigateTo({
          url: item.url,
        });
      } else {
        getWxConfig();
      }
    },
    markingClick() {
      uni.switchTab({
        url: "/pages/Trading/Trading",
      });
    },

    // scroll-view滑动事件
    scroll(e) {
      this.scrollLeft = e.detail.scrollLeft;
    },

    // 首页数据
    async getIndexConfig() {
      let that = this;
      getIndexData().then((res) => {
        uni.setNavigationBarTitle({
          title: "首页",
        });
        that.$set(that, "imgUrls", res.result.records);
      });
    },
  },
};
</script>

<style lang="scss">
.page-index {
  .page_content {
    .swiper {
      position: relative;
      width: 100%;
      height: 333rpx;
      z-index: 2;
      margin: 0 auto;
      overflow: hidden;
      padding: 0;

      swiper,
      .swiper-item,
      image {
        width: 100%;
        height: 333rpx;
      }
    }

    .nav {
      display: flex;
      justify-content: flex-start;
      padding-bottom: 26rpx;
      width: 100%;
      margin-bottom: 30rpx;
      font-size: 24rpx;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: calc(100% / 3);
        margin-top: 60rpx;

        image {
          width: 82rpx;
          height: 82rpx;
          margin-bottom: 20rpx;
        }
      }
    }

    .nav-bd {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .txt {
          font-size: 32rpx;
          color: #282828;
        }

        .label {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 124rpx;
          height: 32rpx;
          margin-top: 5rpx;
          font-size: 24rpx;
          color: #999;
        }

        &.active {
          color: $theme-color-buy;

          .txt {
            color: $theme-color-buy;
          }

          .label {
            background: linear-gradient(90deg, $bg-star 0%, $bg-end 100%);
            border-radius: 16rpx;
            color: #fff;
          }
        }
      }
    }

    .index-product-wrapper {
      margin-bottom: 110rpx;

      &.on {
        min-height: 1500rpx;
      }

      .list-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;

        .item {
          width: calc(50% - 10rpx);
          margin-bottom: 20rpx;
          background-color: #fff;
          border-radius: 10rpx;
          overflow: hidden;

          image {
            width: 100%;
            height: 330rpx;
          }

          .text-info {
            padding: 10rpx 20rpx 15rpx;

            .title {
              color: #222222;
            }

            .old-price {
              margin-top: 8rpx;
              font-size: 26rpx;
              color: #aaaaaa;
              text-decoration: line-through;

              text {
                margin-right: 2px;
                font-size: 20rpx;
              }
            }

            .price {
              display: flex;
              align-items: flex-end;
              color: $theme-color-buy;
              font-size: 34rpx;
              font-weight: 800;

              text {
                padding-bottom: 4rpx;
                font-size: 24rpx;
                font-weight: 800;
              }

              .txt {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 28rpx;
                height: 28rpx;
                margin-left: 15rpx;
                margin-bottom: 10rpx;
                border: 1px solid $theme-color-buy;
                border-radius: 4rpx;
                font-size: 22rpx;
                font-weight: normal;
              }
            }
          }
        }

        &.on {
          display: flex;
        }
      }
    }
  }
}

.marking {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background: white;
  border-radius: 16rpx;
  padding: 20rpx 0;

  .txt_title {
    font-size: 32rpx;
    color: #aaa;
  }

  .txt_price {
    font-size: 34rpx;
    color: $theme-color-buy;
  }

  .righticon {
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}

.mp-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 385rpx;
  background: url("/static/images/index_bg.png") no-repeat;
  background-size: 100% 100%;
  z-index: 1;
}
</style>
